<template>
<div class="box">
  <div class="title"> <button @click="do_examine('no')">取消</button><button @click="do_examine('yes')">确定</button></div>
  <div class="mark ">
    <div class="select f"><span>审批结果：</span>
      <div class="relt " @click.stop="selectShow">
        {{result}}
        <ul v-if="showSelect">
          <li @click.prevent.stop="get_select('同意')">同意</li>
          <li @click.prevent.stop="get_select('不同意')">不同意</li>
        </ul>
        <span></span>
      </div>
    </div>
    <div class="remark f"><span>审批备注：</span>
      <div class="f1"><textarea name="" id="" v-model="remark"></textarea></div>
    </div>
  </div>
  <div class="infoWrapper" ref="contentWrap">
    <div  class="contentWrapper"  >
    <div class="info  relt" v-for="(item,index) in certList" :key="index">
      <ul class="ulList">
        <li class ="f"><span>证书名称：</span> <div v-text="item.CertName" class="overflow3 overflow32" ></div>       <div class="info-right relt"><input type="checkbox" class="checkB" v-model="item.checked" :class="item.checked?'inputCheck':''"></div></li></ul>
      <div class="info-left1">
        <div class="m_info f-bian">
          <ul class="ulList info-left f1">
            <!--<li class ="f"><span>证书名称：</span> <div v-text="item.CertName"></div></li>-->
            <li class ="f"><span>发证单位：</span> <div class="overflow3 " v-text="item.FZWorkUnitName"></div></li>
            <li class ="f"><span>作者：</span> <div v-text="item.Author"></div></li>
            <li class ="f"><span>单位：</span> <div class="overflow3 "  v-text="item.WorkUnitName"></div></li>
            <li class ="f"><span>等级：</span> <div v-text="item.Level"></div></li>
            <li class ="f"><span>级别：</span> <div v-text="item.LevelModel"></div></li>
            <li class ="f"><span>类别：</span> <div v-text="item.CertType"></div></li>
          </ul>
          <div class="info-right2 f200 f-zhong" @click="do_seeDetail(item.Id)">
            <img :src="item.VideoThumb" alt="" >
          </div>
        </div>

      </div>

    </div>
    <!--查询资源错误提醒-->
    <div class="noResource" v-show="imgShow">
      <div><img src="../../assets/img/3aa41c17c34735172a543eed6289129c.png" alt=""></div>
      <p>暂无审批任务！</p>
    </div>
    </div>
  </div>
  <!--错误提醒-->
  <Prompt
    title="错误"
    :msg=mistakeMsg
    confirm="确定"
    v-on:confirm1="confirm1($event)"
    v-if="mistake"
  >
  </Prompt>
</div>
</template>

<script>
  import Prompt from '@components/common/Prompt.vue'
  import BScroll from 'better-scroll'
  let certName;
    export default {
      name: "ExamineDetail",
      inject:['reload'],
      components:{
        Prompt
      },
      data() {
        return {
          imgShow:false,
          mistakeMsg:'',
          mistake:false,
          certName: '789',
          result: '同意',
          showSelect: false,
          remark: '',
          certList: [],
          scroll:{}
        }
      },
      created() {
        let me = this
        me.$bus.$on("CertName", d => {
          certName = d
          sessionStorage.setItem('certName',certName)
        })
        if(sessionStorage.getItem('certName')){
          this.certName =sessionStorage.getItem('certName')
        }
        me.getCertBillList()
      },
      methods: {
        do_seeDetail(id){
          this.$router.push('/CertDetail?Id='+id)
        },
        confirm1(){
          this.mistake=false
        },
        do_examine(item) {
          if (item == "no") {
            this.certList.forEach((item) => {
              item.checked = false
            })
          } else {
            let snList = []
            this.certList.forEach((item) => {
              if (item.checked) {
                snList.push(item.SN)
              }
            })
           this.do_examineReqest(snList)

          }

        },

        do_examineReqest(snList) {
          let me = this
          snList=snList.join()
          console.log(me.certName)
          me.$Global.zcServer.Post({
            IsNeedLogin: 'true',
            Paras: {
              Name: 'Vue_CourseResource',
              Action: 'doReviewCert',
              UserId: me.$Global.UserId,
              Data: {

                UserId: me.$Global.UserId,
                CertName: me.certName,
                Remark: me.remark,
                CertSNStr: snList,
                Result: me.result
              }
            },
            Callback: me.cb_examineReqest,
            Scope: me
          });
        },
        cb_examineReqest(resJson, scope) {
          console.log('处理结果', resJson)
          if(resJson.success){
            this.reload()
          }else {

            this.mistake=true;
            this.mistakeMsg=resJson.msg
            // this.reload()
          }
        },
        selectShow() {
          this.showSelect = true
        },
        get_select(item) {//选同意还是不同意
          this.result = item;
          this.showSelect = false
        },
        getCertBillList() {//获取待审核列表
          let me = this
          // alert(me.certName)
          console.log(me.certName)
          me.$Global.zcServer.Post({
            IsNeedLogin: 'true',
            Paras: {
              Name: 'Vue_CourseResource',
              Action: 'getReviewP_CertList',
              UserId: me.$Global.UserId,
              Data: {
                certName: me.certName,
                UserId: me.$Global.UserId
              }
            },
            Callback: me.cb_getCertBillList,
            Scope: me
          });
        },
        cb_getCertBillList(resJson, scope) {
          console.log("审批", resJson)
          if (resJson.success) {
            if(resJson.data.length==0){
              this.imgShow=true
            }else {
              this.certList = resJson.data
              this.certList.forEach((item) => {
                this.$set(item, "checked", false)
              })
              console.log(this.certList)
            }

          } else {
            this.mistake=true;
            this.mistakeMsg=resJson.msg
          }
          this.$nextTick(()=>{

            this.scroll = new BScroll(this.$refs.contentWrap, {
              probeType: 3,
              click:true,
              scrollX: false,
              bounce: false
            });
          })
        }
      }
    }
</script>

<style scoped>
  @font-face {
    font-family: 'iconfont';  /* project id 1287028 */
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot');
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff') format('woff'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.svg#iconfont') format('svg');
  }
  input[type="checkbox"]{
    /*margin-left: 10px;*/
    position: relative;
    width: 20px;
    height: 20px;
    background-color: transparent;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    left: -3px !important;
  }
  .inputCheck:before{
    font-family: "iconfont" ;
    content: "\e62b" !important;
    font-size:20px !important;
    font-weight: 400 !important;
    color: #5BC2F6 !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: -5px 0px 0px -5px !important;
    z-index: 99 !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;
  }
  .title{
    height: 50px;
    line-height: 50px;
    text-align: right;
    /*padding-right: 10px;*/
  }
.title button{
margin-right: 10px;
  border: none;
  margin-top: 8px;
  background-color: #CCCCCC;
  color: #818181;
}
  .title button:last-child{
    background-color: #5BC2F6;
    color: white;
  }
  .mark{
    background-color: white;
    padding-left: 5px;
  }
  .select>.relt{
    width: 160px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    margin-top: 8px;
    padding-left: 10px;
  }
  .select{
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #ccc;
  }
  .select>.relt ul {
    position: absolute;
    left: -1px;
    width: 160px;
    top: 27px;
    border-left: 1px solid #ccc;
    background-color: white;

  }
  .select>.relt ul li{
    height: 28px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-left: 10px;
  }
  .select>.relt>span{
    position: absolute;
    width:0;
    height:0;
    border-width:8px 5px 8px;
    border-style:solid;
    border-color: #5d5d5d transparent transparent;/*灰 透明 透明 */
    left:140px;
    top:50%;
    margin-top: -5px;
  }
  .remark{
    padding-top: 10px;
  }
  .remark>span{
    position: relative;
    top: 10px;
  }
  textarea{
    width: 97%;
    min-height: 60px;
    line-height: 25px;
    margin: 0;
    padding: 5px;
    /*border: 1px solid #ccc;*/
  }
  .info{
    background-color: white;
    padding: 10px 5px ;
    margin-top: 10px;
  }
  .ulList{
    font-size: 14px;
  }
  .ulList>li{
    height: 28px;
    line-height: 28px;
  }
  .ulList>li>span{
    display: inline-block;
    width: 70px !important;

  }
  .info-right{
    position: absolute;
    top:15px;
    right: 15px;
  }
  .checkB{
    /*position: absolute;*/
    /*top:15px;*/
    /*right: 10px;*/
    font-size: 18px;
  }
 .noResource{
    width: 100%;
    display: flex;
    align-items:center ;
    justify-content: center;
    flex-direction: column
  }
.noResource img{
    height: 150px;
    width: 150px;
    /*visibility:hidden;*/
  }
  .infoWrapper{
    position: absolute;
    width: 100%;
    top: 180px;
    bottom: 0;
    overflow: hidden;
  }
  .info-right2, .info-right2>img{
    width: 140px !important;
  }
.overflow3{
  max-width: 155px;
}
  .overflow32{
   max-width: 250px !important;
  }
</style>
